<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Registration Form with Draggable Capture</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <script type="text/javascript" src="jquery-1.3.2.js"></script>
        <script type="text/javascript" src="ui.core.js"></script>
        <script type="text/javascript" src="ui.sortable.js"></script>
        <style type="text/css">
            body{
                background-color: #2daebf;
            }
            form.registration{
                width:600px;
                margin: 10px auto;
                padding:10px;
                font-family: "Trebuchet MS";   
            }
            form.registration fieldset{
                background-color:#707070;
                border:none;
                padding:10px;
                -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
                -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
                -moz-border-radius: 15px;
                -webkit-border-radius: 15px;				          
                padding:6px;
                margin:0px 30px 0px 0px;
            }
            form.registration legend{
                text-align:left;
                color:#fff;
                font-size:14px;
                padding:0px 4px 15px 4px;
                margin-left:20px;
                font-weight:bold;
            }
            form.registration label{
                font-size: 18px;
                width:200px;
                float: left;
                text-align: right;
                clear:left;
                margin:4px 4px 0px 0px;
                padding:0px;
                color: #FFF;
                text-shadow: 0 1px 1px rgba(0,0,0,0.8);
            }
            form.registration input{
                font-family: "Trebuchet MS";
                font-size: 18px;
                float:left;
                width:300px;
                border:1px solid #cccccc;
                margin:2px 0px 4px 2px;
                color:#00abdf;
                height:26px;
                padding:3px;
                -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
                -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
                -webkit-border-radius: 5px;
                -moz-border-radius: 5px;
            }
            form.registration input:focus, form.registration select:focus{
                background-color:#E0E6FF;
            }
            form.registration select{
                font-family: "Trebuchet MS";
                font-size: 20px;
                float:left;
                border:1px solid #cccccc;
                margin:2px 0px 2px 2px;
                color:#00abdf;
                height:32px;
                -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
                -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
                -webkit-border-radius: 5px;
                -moz-border-radius: 5px;
            }
            .button, .button:visited{
                float:right;
                background: #2daebf url(images/overlay.png) repeat-x; 
                font-weight:bold;
                display: inline-block; 
                padding: 5px 10px 6px; 
                color: #fff; 
                text-decoration: none;
                -moz-border-radius: 5px; 
                -webkit-border-radius: 5px;
                -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
                -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
                text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
                border-bottom: 1px solid rgba(0,0,0,0.25);
                cursor: pointer;
                margin-top:95px;
                margin-right:15px;
            }
            .button:hover{
                background-color: #007d9a; 
            }
            #sortable {
                list-style-type: none;
                margin: 5px 0px 0px 16px;
                padding: 0;
            }
            #sortable li {
                margin: 3px 3px 3px 0;
                padding: 1px;
                float: left;
                width: 35px;
                height: 35px;
                font-size: 20px;
                text-align: center;
                line-height:35px;
                cursor:pointer;
                -moz-border-radius:5px;
                -webkit-border-radius:5px;
                -moz-box-shadow: 0 1px 1px rgba(0,0,0,0.5);
                -webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.5);
                text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
                background:#2daebf url(images/overlay.png) repeat-x scroll 50% 50%;
                color:#fff;
                font-weight:normal;
            }
            .captcha_wrap{
                border:1px solid #fff;
                -moz-border-radius:10px;
                -webkit-border-radius:10px;
                -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
                -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
                float:left;
                height:120px;
                overflow:auto;
                width:150px;
                overflow:hidden;
                margin:0px 0px 0px 210px;
                background-color:#fff;
            }
            .captcha{
                -moz-border-radius:10px;
                -webkit-border-radius:10px;
                font-size:12px;
                color:#BBBBBB;
                text-align: center;
                border-bottom:1px solid #CCC;
                background-color:#fff;
            }
        </style>
        <script type="text/javascript">
            (
            function($){

                $.fn.shuffle = function() {
                    return this.each(function(){
                        var items = $(this).children();

                        return (items.length)
                            ? $(this).html($.shuffle(items,$(this)))
                        : this;
                    });
                }

                $.fn.validate = function() {
                    var res = false;
                    this.each(function(){
                        var arr = $(this).children();
                        res =    ((arr[0].innerHTML=="ก")&&
                            (arr[1].innerHTML=="ข")&&
                            (arr[2].innerHTML=="ค")&&
                            (arr[3].innerHTML=="ง")&&
                            (arr[4].innerHTML=="จ")&&
                            (arr[5].innerHTML=="ฉ"));
                    });
                    return res;
                }

                $.shuffle = function(arr,obj) {
                    for(
                    var j, x, i = arr.length; i;
                    j = parseInt(Math.random() * i),
                    x = arr[--i], arr[i] = arr[j], arr[j] = x
                );
                    if(arr[0].innerHTML=="1") obj.html($.shuffle(arr,obj))
                    else return arr;
                }

            })(jQuery);

            $(function() {
                $("#sortable").sortable();
                $("#sortable").disableSelection();
                $('ul').shuffle();

                $("#formsubmit").click(function(){
                    ($('ul').validate()) ? alert("Yeah, you are a human!") : alert("No, you are not a human!");
                });
            });
        </script>
    </head>
    <body>
        <form class="registration">
            <fieldset>
                <legend>Let's see if you are a human</legend>
                <div class="captcha_wrap">
                    <div class="captcha">
			Drag to order
                    </div>
                    <ul id="sortable">
                        <li class="captchaItem">ก</li>
                        <li class="captchaItem">ข</li>
                        <li class="captchaItem">ค</li>
                        <li class="captchaItem">ง</li>
                        <li class="captchaItem">จ</li>
                        <li class="captchaItem">ฉ</li>
                    </ul>
                </div>
                <a id="formsubmit" class="button">Register</a>
            </fieldset>
        </form>
    </body>
</html>